import { ReactElement, useState, useRef, useEffect } from 'react'
import { Button, Radio, Space } from 'antd'
import style from './index.module.less'
import Search, { formatCondition } from './components/search'
import Table, { TableRef } from '@components/table'
import { getColumn } from './util'
import { SeriesSchema } from '@components/schema/seriesCase'
import { awaitWrap } from '@js/tool'
import { getSeriesListRequest } from './ajax'
import EditModal from './components/editModal'
import { ConditionSchema } from '@components/schema/condition'
import { useDispatch } from 'react-redux'
import { addWindow } from '@src/redux/actions/tab'

// 初始化数据
async function initData (data: { [k: string]: any}, setDataSource: (v: SeriesSchema[]) => void, setTotal: (v: number) => void, setLoading: (v: boolean) => void): Promise<void> {
  setLoading(true)
  const t = typeof data.serieType === 'string' ? data.serieType : 'accepter_serieno'
  const p = formatCondition(data)
  const params: { condition: ConditionSchema[], page: number, limit: number, type: string, caseno_desc?: string } = {
    condition: p.condition,
    page: data.page,
    limit: data.limit,
    type: t,
    caseno_desc: p.caseno_desc
  }
  const [e, d] = await awaitWrap(getSeriesListRequest(params))
  setLoading(false)
  if (e === null && d !== null) {
    setTotal(d.total)
    setDataSource(d.list)
  }
}

function Main (): ReactElement {
  const dispatch = useDispatch()
  const tableRef = useRef<TableRef>(null)
  const [loading, setLoading] = useState(false)
  const [total, setTotal] = useState(0)
  const [dataSource, setDataSource] = useState<SeriesSchema[]>([])
  const [visible, setVisible] = useState(false)
  const [modifyData, setModifyData] = useState<SeriesSchema | null>(null)
  const [params, setParams] = useState<{[k: string]: any}>({serieType: 'accepter_serieno'})
  return (
    <div className={style.container}>
      <EditModal visible={visible} data={modifyData} hide={() => { setModifyData(null); setVisible(false) }} refreshData={() => tableRef.current?.refreshData()} />
      <div className={style.search}>
        <Search params={params} setParams={setParams} />
      </div>
      <div className={style.body}>
        <div className={style['operate-lien']}>
          <span className={style['page-title']}>系列案管理</span>
          <Space>
            <Radio.Group value={params.serieType} onChange={e => { setParams({ ...params, serieType: e.target.value }) }}>
              <Radio.Button value='accepter_serieno'>收案系列案</Radio.Button>
              <Radio.Button value='processer_serieno'>办案系列案</Radio.Button>
            </Radio.Group>
            <Button type='primary' onClick={() => {
              dispatch(addWindow({ id: 'series-case-input', title: '创建系列案', componentName: 'SeriesCaseInput' }))
            }}>创建系列案</Button>
          </Space>
        </div>
        <Table params={params} setParams={setParams} ref={tableRef} columns={getColumn(dispatch, params.serieType, setModifyData, setVisible, () => tableRef.current?.refreshData())} loading={loading} total={total} dataSource={dataSource} onChange={async (d) => { await initData(d, setDataSource, setTotal, setLoading) }} />
      </div>
    </div>
  )
}

export default Main
